<template>
    <div :style="{height:height,width:width}"></div>
</template>

<script>
import resize from './mixins/resize';
import * as echarts from 'echarts/core';
import {
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
} from 'echarts/components';
import {
    LineChart,
} from 'echarts/charts';
import {
    CanvasRenderer,
} from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
echarts.use([PieChart]);
echarts.use(
    [TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, LineChart, CanvasRenderer],
);

export default {
    mixins: [resize],
    props: {
        width: {
            type: String,
            default: '100%',
        },
        height: {
            type: String,
            default: '350px',
        },
        autoResize: {
            type: Boolean,
            default: true,
        },
        chartData: {
            type: Object,
        },
    },
    data() {
        return {
            chart: null,
            defaultOptins: {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        areaStyle: {}
                    }
                ]
            },
        };
    },
    mounted() {
        this.initCharts();
    },
    updated(){
        this.initCharts();
    },
    methods: {
        initCharts() {
            this.chart = echarts.init(this.$el);
            this.chart.setOption(this.chartData || this.defaultOptins);
        },
    },
};
</script>
